import { FC, useEffect, useRef } from "react"
import {
  AxesHelper, PerspectiveCamera,
  PointLight, Scene, WebGLRenderer,
  AmbientLight, Vector3, Quaternion, Group, ArrowHelper, Euler,
} from "three"
import {
  DirectionalModel
} from "R/models";

import { GUI } from "dat.gui";
import {OrbitControls} from 'R/utils'
// 椭圆点位置
const lightPosition = new Vector3(60, 100, 10),
  modelPostion = new Vector3(20, 10, 5)

const Page: FC = () => {
  const container = useRef<HTMLCanvasElement>(null);
  // 基本对象
  useEffect(() => {
    const bodyele = document.body;
    const renderer = new WebGLRenderer({ canvas: container.current! }),
      camera = new PerspectiveCamera(90, bodyele.clientWidth / bodyele.clientHeight, 1, 1000),
      scene = new Scene(),
      pointLight = new PointLight(0xffffff, 2),
      axesHelper = new AxesHelper(100);
    renderer.setClearAlpha(.4)
    renderer.setSize(bodyele.clientWidth, bodyele.clientHeight)
    const gui = new GUI()
    camera.position.set(20, 20, 50)

    // 控制器设置
    const orbitControls = new OrbitControls(camera, renderer.domElement)
    orbitControls.minDistance = 10
    orbitControls.maxDistance = 100

    // orbitControls.maxPolarAngle = Math.PI / 2

    DirectionalModel.add(new AxesHelper(15))
    // 模型位置设置


    
    
    // const axis = new Vector3(1, 1, 1)
    const arrow = new ArrowHelper(modelPostion.clone().normalize(), new Vector3(0, 0, 0), 60, 0xffff00)
    DirectionalModel.position.copy(modelPostion)
    const qua = new Quaternion()
    console.log(qua);
    const euler = new Euler()
    // euler.x = Math.PI / 2
    // euler.y = 30 * Math.PI / 180
    qua.setFromEuler(euler)
    console.log(qua);
    DirectionalModel.quaternion.setFromEuler(euler)
    DirectionalModel.position.applyQuaternion(qua)
    


    // 灯光位置
    pointLight.position.copy(lightPosition)
    pointLight.decay = 0

    scene.add(
      new AmbientLight(0xffffff, 1),
      axesHelper,
      pointLight,
      // DirectionalModelWrapper,
      DirectionalModel,
      arrow
    )

    function roun() {
      renderer.render(scene, camera)
      requestAnimationFrame(roun)

    }
    roun()
    return () => {
      gui.destroy()
      renderer.dispose
    }
  }, [])
  return <canvas ref={container}></canvas>
}
export default Page